<template>
  <el-container style="height: 100vh">
    <!-- 左侧导航：添加左下角退出登录按钮 -->
    <el-aside
      width="220px"
      style="
        background-color: #eef1f6ff;
        box-shadow: 1px 0 3px rgba(0, 0, 0, 0.05);
        display: flex;
        flex-direction: column;
      "
    >
      <!-- 菜单区域 -->
      <el-menu
        :default-active="$route.path"
        router
        :unique-opened="true"
        class="el-menu-vertical-demo"
        background-color="transparent"
        text-color="#333"
        active-text-color="#1890ff"
        :collapse-transition="true"
      >
        <!-- 用户管理 -->
        <el-sub-menu index="user-management" class="custom-submenu">
          <template #title>
            <div class="menu-title-wrapper">
              <i class="el-icon-user menu-icon"></i>
              <span class="menu-text">用户管理</span>
            </div>
          </template>
          <el-menu-item
            index="/admin"
            :disabled="inMemoryStorage.role === 'Worker'"
            @click="handleMenuClick('/admin')"
            class="custom-menu-item"
          >
            <i class="el-icon-user-solid menu-item-icon"></i>
            <span>工人管理</span>
          </el-menu-item>
          <el-menu-item
            index="/admin/b"
            :disabled="inMemoryStorage.role === 'Worker'"
            @click="handleMenuClick('/admin/b')"
            class="custom-menu-item"
          >
            <i class="el-icon-user menu-item-icon"></i>
            <span>访客管理</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 园内管理 -->
        <el-sub-menu index="data-display" class="custom-submenu">
          <template #title>
            <div class="menu-title-wrapper">
              <i class="el-icon-s-data menu-icon"></i>
              <span class="menu-text">园内管理</span>
            </div>
          </template>
          <el-menu-item
            index="/admin/pond"
            :disabled="inMemoryStorage.role === 'Administrator'"
            @click="handleMenuClick('/admin/pond')"
            class="custom-menu-item"
          >
            <i class="el-icon-pie-chart menu-item-icon"></i>
            <span>池塘管理</span>
          </el-menu-item>
          <el-menu-item
            index="/admin/orchard"
            :disabled="inMemoryStorage.role === 'Administrator'"
            @click="handleMenuClick('/admin/orchard')"
            class="custom-menu-item"
          >
            <i class="el-icon-s-marketing menu-item-icon"></i>
            <span>果树管理</span>
          </el-menu-item>
          <el-menu-item
            index="/admin/flower"
            :disabled="inMemoryStorage.role === 'Administrator'"
            @click="handleMenuClick('/admin/flower')"
            class="custom-menu-item"
          >
            <i class="el-icon-s-marketing menu-item-icon"></i>
            <span>花卉管理</span>
          </el-menu-item>
        </el-sub-menu>

        <!-- 管理设备 -->
        <el-sub-menu index="system" class="custom-submenu">
          <template #title>
            <div class="menu-title-wrapper">
              <i class="el-icon-setting menu-icon"></i>
              <span class="menu-text">管理设备</span>
            </div>
          </template>
          <el-menu-item
            index="device"
            :disabled="inMemoryStorage.role === 'Administrator'"
            @click="handleMenuClick('/admin/device')"
            class="custom-menu-item"
          >
            <i class="el-icon-document menu-item-icon"></i>
            <span>设备管理</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>

      <!-- 左下角退出登录按钮 -->
      <div class="logout-container">
        <el-button type="text" class="custom-logout-btn" @click="logout">
          <i class="el-icon-logout logout-icon"></i>
          <span class="logout-text">退出登录</span>
        </el-button>
      </div>
    </el-aside>

    <!-- 主内容区 -->
    <el-container style="background-color: #eef1f6ff">
      <el-header
        style="
          text-align: right;
          font-size: 12px;
          background-color: #eef1f6ff;
          border: none;
          height: 60px !important;
          line-height: 60px !important;
        "
      >
        <el-dropdown>
          <i
            class="el-icon-setting"
            style="margin-right: 15px; font-size: 16px; cursor: pointer"
          ></i>
          <el-dropdown-menu>
            <el-dropdown-item>个人中心</el-dropdown-item>
            <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-header>

      <el-main
        style="padding: 20px; background-color: #eef1f6ff; border-top: none"
      >
        <router-view />
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { inMemoryStorage } from "/src/router/index.js";
import { useRouter, useRoute } from "vue-router";
import { ref, watch } from "vue";

const router = useRouter();
const route = useRoute();
const toastMessage = ref("");

// 统一提示消息方法
const showToast = (message) => {
  toastMessage.value = message;
  setTimeout(() => {
    toastMessage.value = "";
  }, 3000);
};

// 统一菜单点击处理逻辑
const handleMenuClick = (targetPath) => {
  const role = inMemoryStorage.role || "";
  // 工人点击管理员菜单
  if (
    role === "Worker" &&
    (targetPath === "/admin" || targetPath === "/admin/b")
  ) {
    showToast("工人无权限访问用户管理页面");
    router.replace("/admin/pond");
    return;
  }
  // 管理员点击工人专属菜单
  if (
    role === "Administrator" &&
    (targetPath.includes("/pond") ||
      targetPath.includes("/orchard") ||
      targetPath.includes("/flower") ||
      targetPath.includes("/device"))
  ) {
    showToast("管理员无权限访问工人专属页面");
    router.replace("/admin");
    return;
  }
};

// 监听路由变化，拦截强行访问
watch(
  () => route.path,
  (newPath) => {
    const role = inMemoryStorage.role || "";
    // 工人强行访问管理员路径
    if (role === "Worker" && (newPath === "/admin" || newPath === "/admin/b")) {
      router.replace("/admin/pond");
      showToast("工人无权限访问用户管理页面");
    }
    // 管理员强行访问工人路径
    if (
      role === "Administrator" &&
      (newPath.includes("/pond") ||
        newPath.includes("/orchard") ||
        newPath.includes("/flower") ||
        newPath.includes("/device"))
    ) {
      router.replace("/admin");
      showToast("管理员无权限访问工人专属页面");
    }
  },
  { immediate: true }
);

// 退出登录逻辑
const logout = () => {
  inMemoryStorage.token = "";
  inMemoryStorage.role = "";
  router.replace("/");
  showToast("退出登录成功");
};
</script>

<style scoped>
/* 提示消息样式 */
.toast {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 10px 20px;
  border-radius: 4px;
  z-index: 1001;
  animation: fadein 0.3s, fadeout 0.3s 2.7s;
}

/* 动画效果 */
@keyframes fadein {
  from {
    top: 0;
    opacity: 0;
  }
  to {
    top: 20px;
    opacity: 1;
  }
}

@keyframes fadeout {
  from {
    top: 20px;
    opacity: 1;
  }
  to {
    top: 0;
    opacity: 0;
  }
}

/* 自定义子菜单样式 */
.custom-submenu {
  margin: 8px 0;
  border-radius: 8px !important;
  overflow: hidden;
}

/* 菜单标题容器 */
.menu-title-wrapper {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 0 15px;
}

/* 主菜单图标 */
.menu-icon {
  font-size: 18px;
  margin-right: 12px;
  color: #1890ff;
}

/* 主菜单文字 */
.menu-text {
  font-size: 15px;
  font-weight: 500;
}

/* 子菜单项样式 */
.custom-menu-item {
  position: relative;
  transition: all 0.3s ease !important;
  border-left: 3px solid transparent;
}

/* 子菜单图标 */
.menu-item-icon {
  font-size: 14px;
  margin-right: 10px;
  color: #666;
}

/* 子菜单hover效果 */
.custom-menu-item:hover {
  background-color: #d1e7ff !important;
  padding-left: 25px !important;
}

/* 子菜单选中效果 */
.el-menu-item.is-active {
  background-color: #e6f4ff !important;
  border-left: 3px solid #1890ff !important;
  font-weight: 500;
}

/* 统一禁用菜单样式 */
.el-menu-item.is-disabled {
  color: #c0c4cc !important;
  cursor: not-allowed !important;
  background-color: transparent !important;
}

.el-menu-item.is-disabled:hover {
  background-color: transparent !important;
  padding-left: 20px !important;
}

/* 子菜单标题hover效果 */
.el-submenu__title {
  transition: all 0.3s ease !important;
  height: 50px !important;
  line-height: 50px !important;
}

.el-submenu__title:hover {
  background-color: #d1e7ff !important;
  border-radius: 8px;
}

/* 消除菜单默认边框和内边距 */
.el-menu {
  border-right: none !important;
  padding-top: 10px !important;
  flex: 1; /* 让菜单占满剩余空间，把退出按钮挤到下方 */
  overflow-y: auto; /* 菜单过多时可滚动 */
}

/* 退出登录按钮容器 */
.logout-container {
  padding: 15px 20px 20px; /* 底部留出间距 */
}

/* 自定义退出按钮样式 */
.custom-logout-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  color: #ff4d4f !important;
  font-size: 14px;
  padding: 10px 0;
  border-radius: 8px;
  transition: all 0.3s ease !important;
  background-color: #fff5f5 !important;
}

.custom-logout-btn:hover {
  background-color: #ffe0e0 !important;
  color: #ff3838 !important;
}

/* 退出按钮图标 */
.logout-icon {
  margin-right: 8px;
  font-size: 16px;
}

.logout-text {
  font-weight: 500;
}
</style>

<style>
/* 全局样式清除默认边框 */
.el-container,
.el-header,
.el-main,
.el-aside {
  border: none !important;
  box-shadow: none !important;
  margin: 0;
  padding: 0;
}

/* 优化下拉菜单样式 */
.el-dropdown-menu {
  border-radius: 8px !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1) !important;
  border: none !important;
}

.el-dropdown-item {
  transition: background-color 0.2s ease !important;
}

.el-dropdown-item:hover {
  background-color: #e6f4ff !important;
  color: #1890ff !important;
}

/* 清除按钮默认边框 */
.el-button--text {
  border: none !important;
}
</style>
